<template>
	<view>

		<top type="life"></top>
		<view class="text">
			<view class="nav">
				<view :class="['item',selTypeId==-1?'select':'']" @tap="selectType(-1)">全部</view>
				<view v-for="(rows,ins) in listType" :key="ins" @tap="selectType(rows.id)"
					:class="['item',selTypeId==rows.id?'select':'']">
					{{rows.promotionsUserTypeNm}}
				</view>
			</view>

			<view class="list">
				<view class="tu" v-for="(item,index) in list" :key="index" @tap="selMerchant(item.promotionGroupId)">
					<image :src="item.ImgSrc" class="zhe" mode="widthFix"></image>
					<view class="txt">
						{{item.promotionName}}
					</view>
				</view>
			</view>

		</view>
		<redFoor></redFoor>

	</view>

</template>

<script>
	import redFoor from '@/components/red/index.vue'
	import wenti from '@/components/red/wenti.vue'
	import top from '@/components/red/top.vue'
	import {
		mapState
	} from 'vuex'
	import {
		SHType
	} from "@/api/classification";
	import {
		GetLifeHomeInfo
	} from "@/api/redlife";

	export default {
		components: {
			redFoor,
			wenti,
			top
		},
		data() {
			return {
				wen: 0,
				listType: [],
				selTypeId: -1,
				list: [],
				listAll: []
			}
		},
		computed: {
			...mapState('user', {
				currentOpenid: state => state.openid
			})
		},
		onLoad() {
			this.getType();
			this.getMerchant();
		},
		methods: {
			getMerchant() {
				console.log('Current openid:', this.currentOpenid) // 调试用
				GetLifeHomeInfo({
						openid: this.currentOpenid,
						PromotionUserType: this.selTypeId
					})
					.then(res => {
						var promotionUsers = res.data.promotionUsersResponses;
						promotionUsers = promotionUsers.map(({
							...rest
						}) => {
							return {
								ImgSrc: "/static/img/zhe.png",
								...rest
							};
						});
						this.listAll = promotionUsers;
						this.list = promotionUsers;
					})
					.catch(res => {

					});

				// this.list = [{
				// 		"Name": "固美电器",
				// 		"Value": "1",
				// 		"ImgSrc": "/static/img/zhe.png"
				// 	},
				// 	{
				// 		"Name": "固美电器",
				// 		"Value": "2",
				// 		"ImgSrc": "/static/img/zhe.png"
				// 	},
				// 	{
				// 		"Name": "固美电器",
				// 		"Value": "3",
				// 		"ImgSrc": "/static/img/zhe.png"
				// 	},
				// 	{
				// 		"Name": "固美电器",
				// 		"Value": "4",
				// 		"ImgSrc": "/static/img/zhe.png"
				// 	},
				// 	{
				// 		"Name": "固美电器",
				// 		"Value": "5",
				// 		"ImgSrc": "/static/img/zhe.png"
				// 	},
				// 	{
				// 		"Name": "固美电器",
				// 		"Value": "6",
				// 		"ImgSrc": "/static/img/zhe.png"
				// 	}
				// ]

			},
			getType() {
				SHType({})
					.then(res => {
						this.listType = res.data
					})
					.catch(res => {

					});
			},
			selectType(id) {
				this.selTypeId = id;
				this.getMerchant();
				// var list = JSON.parse(JSON.stringify(this.listAll));
				// if (id != 0) {
				// 	list = list.filter(t => t.promotionUserType == id);
				// }
				// this.list = list;
			},
			selMerchant(id) {
				uni.navigateTo({
					url: '/pages/red/tuiguang?id=' + id
				})
			},

			nato(url) {

				uni.navigateTo({
					url
				})
			},
			wenti() {
				this.wen = 1
			},

		}
	}
</script>

<style scoped>
	.text {
		width: 90%;
		margin: 0 auto;
		/* margin-top: 18%; */
		margin-top: 5%;
	}

	.text_title {
		color: #3D3D3D;
		font-weight: 600;
		margin-top: 3%;
	}

	.bg {
		width: 100%;
		height: 300upx;
	}

	.nav {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		/* padding: 24rpx 0; */
		border-bottom: 1px solid #eee;
		margin-bottom: 10rpx;
	}

	/* .item {
		margin-left: 5upx;
		margin-right: 5upx;
		font-size: 25rpx;
	} */

	.item {
		padding: 12rpx 10rpx;
		font-size: 28rpx;
		color: #666;
		background: #f5f5f5;
		border-radius: 15rpx;
		transition: all 0.3s;
	}
	
	.select {
		color: #fff;
		background: #FC0000;
		font-weight: 500;
	}

	.list {
		display: flex;
		flex-wrap: wrap;
		width: 90%;
		overflow-y: auto;
		height: 30%;
		/* bottom: 10%; */
		position: fixed;
	}

	.tu {
		flex: 0 0 23%;
		/* 等同于设置了flex-grow, flex-shrink和flex-basis */
		margin-right: 2%;
		margin-bottom: 2%;

	}

	.zhe {
		width: 100%;
	}

	.txt {
		text-align: center;
	}
</style>